@text-black-1:rgba(29,33,41,1);
@text-black-2:rgba(78,89,105,1);
@text-black-3:rgba(134,144,156,1);
@text-black-4:rgba(201,205,212,1);
@text-black-10: rgba(29,33,41,1);

@bg-fill-1:rgba(247,248,250,1);
@bg-fill-2:rgba(242,243,245,1);
@bg-fill-3:rgba(229,230,235,1);
@bg-fill-4:rgba(201,205,212,1);

@text-blue-0:rgba( 14,66,210,1);
@text-blue-1: rgba(22,93,255,1);
@text-blue-2: rgba(64,128,255,1);
// @text-blue-3:
@blue-shadow: 0 0 0 0 rgba(190,218,255,1);

@bg-red-1: rgba(255,236,232,1);
@bg-red-2:rgba( 253,205,197,1);
@bg-red-5:rgba(245,63,63,1);

@bg-green-6: rgba(0,180,42,1);
@bg-green-1: rgba(232,255,234,1);

@bg-orange-6:rgba(247,114,52 ,1);
@bg-orange-1:rgba(255,243,232,1);

@bg-cyan-6: rgba(20,201,201,1);
@bg-cyan-1: rgba(232,255,251,1);

@bg-blue-6: rgba(52, 145, 250,1);
@bg-blue-1: rgba(232, 247, 255);


@menuText: #bfcbd9;
@menuActiveText: #fff;
@menuActiveBg: @text-blue-1;
@menuBg: #001529;
@menuWidth: 220px;
@menuMinWidth: 48px;
@menuCloseWidth: 1px;

@subMenuBg: #1f2d3d;
@subMenuHover:#0f67d9;
@subMenuActiveText: #fff;

@topMenuHeight: 60px;
@topMenuBg: #fff;

@topMenuText: #303133;
@topMenuActiveText: #2d8cf0;
@topMenuActiveBg: #fff;



@topSubMenuBg: #1f2d3d;
@topSMenuHover: #2d8cf0;
@topSMenuActiveText: #2d8cf0;

// meunTab
@menuTabWidth: 90px;
@menuTabItemHeight: 70px;
@menuTabBg: #fff;
@menuTabText: black;
@menuTabActiveBg: #2d8cf0;
@menuTabActiveText: #fff;

// menuTopTab
@menuTopTabWidth: 120px;
@menuTopTabBg: #fff;
@menuTopTabText: black;
@menuTopTabActiveBg: #2d8cf0;
@menuTopTabActiveText: #fff;


// tagsView
@tagsViewHeight: 40px;
@tagActiveBg: #304156;

// content
@contentBg: #fff;
@appBg: #f5f7f9;

// html body
@minWidth: 992px;

// deep
@deep: ~'::v-deep';



@siderBarShadow:0.8rem 0.8rem 1.4rem #c8d0e7, -0.2rem -0.2rem 1.8rem #ffffff;

// button color 
@primary-light: #8abdff;
@primary: #6d5dfc;
@primary-dark: #5b0eeb;

@white: #FFFFFF;
@greyLight-1: #E4EBF5;
@greyLight-2: #c8d0e7;
@greyLight-3: #bec8e4;
@greyDark: #9baacf;

// @menuText: #343a65;;
// @menuActiveText: #0067ff;
// @menuActiveBg: #0067ff;
// @menuBg: #fff;

@shadow: .3rem .3rem .6rem #c8d0e7, -.2rem -.2rem .5rem #FFFFFF;
@linearBlueBg:linear-gradient(#0f67d9,#016dff,#0073ff,#0079ff,#007fff,#0085fe,#008dff,#0091ff,#0099fe,#01a1ff);
@linearOrangeBg:linear-gradient(to right, #e58b5a,#ef8e54,#f2955b,#f49c63,#f4a46b,#f7ab74,#f8b37d,#f9b983);
@orangesmlShadow:2px 1px 3px rgba(249,185,131,0.5);
@linearGreenBg:linear-gradient(to right,#15c9bc,#00d3c7,#01d6c9,#00dace,#00dfd4,#00e2d8,#00e5dc,#10e4e0);
@linearGreenCircle: linear-gradient(#2ce5da,#1de1d3,#2be5db,#4ceae3,#65f2eb,#77f5ec,#69f2ea,#4eeee3);
@linearPinkBg: linear-gradient(#fd839b,#fe8da3,#fe90a8,#fb96b0,#fa9bb2,#f39fb9);
@linearPrupleBg:linear-gradient(#4f73f0,#5277f1,#577df2,#5e83f2,#658bf4,#6c93f7,#769cf6,#7ca3f7,#83a8f5);
@blueBar: linear-gradient(#0867f5,#1476ff,#2986ff,#3b93fe,#5cacff,#75bcff,#9fd5f7);

@shadowOrange:rgba(242,149,91,0.5);
@shadowBlue:rgba(1,161,255,0.5);
@shadowGreen:rgba(119,245,236,0.5);
@shadowRed:rgba(243,159,185,0.5);


@orangesmlShadow:2px 2px 3px @shadowOrange;
@bluesmlShadow:2px 2px 3px @shadowBlue;
@greensmlShadow:2px 2px 3px @shadowGreen;
@redsmlShadow:2px 2px 3px @shadowRed;

@orangeHoverShadow:0 8px 20px 0 @shadowOrange;
@blueHoverShadow:0 8px 20px 0 @shadowBlue;
@greenHoverShadow:0 8px 20px 0 @shadowGreen;
@redHoverShadow:0 8px 20px 0 @shadowRed;
// the :export directive is the magic sauce for webpack



:export {
  menuText: @menuText;
  menuActiveText: @menuActiveText;
  menuActiveBg: @menuActiveBg;
  menuBg: @menuBg;
  subMenuBg: @subMenuBg;
  subMenuHover: @subMenuHover;
  menuWidth: @menuWidth;
  menuMinWidth: @menuMinWidth;
  linearBlueBg:@linearBlueBg;
  text-blue-1:@text-blue-1;
}